<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
  <img src="./img/1.jpg" alt="" data-src="./img/2.jpg">
</div>
  <script>
    window.onload = function() {
      let  imgs = document.getElementsByTagName('img')
    console.log(imgs.length);
    //图片到顶部的距离
    function getTop(e) {
      return e.offsetTop
    }
    //浏览器高度
    let h = window.innerHeight
    function lazy(imgs){
      console.log(window.scrollY+h,imgs[10].offsetTop);
      console.log(imgs[15].offsetTop)
      for (let i = 0;i<imgs.length;i++) {
        if (window.scrollY+h > imgs[i].offsetTop){
          imgs[i].src = imgs[i].getAttribute('data-src')
        }else{
          console.log(111);
        }
      }
    }
    lazy(imgs)
    window.onscroll =function(){
		  lazy(imgs);
	  }
    }
    
  </script>
</body>

</html>